<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>WoW</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="__PUBLIC__/AdminLTE/css/AdminLTE.min.css">
  <link rel="stylesheet" href="__PUBLIC__/AdminLTE/css/Source+Sans+Pro.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect.
  -->
  <link rel="stylesheet" href="__PUBLIC__/AdminLTE/css/skins/skin-blue.min.css">
  <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap-table.min.css">
  <!-- Toast -->
  <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/toastr.min.css">
  <link rel="stylesheet" href="__PUBLIC__/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="__PUBLIC__/easyui/themes/icon.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header -->
  <header class="main-header">

    <!-- Logo -->
    <a class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>W</b>o<b>W</b></span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>W</b>o<b>W</b></span>
    </a>

    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- 退出登录按钮 -->
          <li>
            <a href="{:U('Admin/Admin/logout')}"><i class="fa fa-arrow-circle-o-right"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- Sidebar Menu -->
      <ul class="sidebar-menu">
        <li class="header">帐号/角色管理</li>
        <!-- Optionally, you can add icons to the links -->
        <li class="active">
          <a href="#acc_list" aria-controls="acc_list" data-toggle="tab"><i class="fa fa-link"></i> <span>帐号列表</span></a>
        </li>
        <li>
          <a href="#chara_list" aria-controls="chara_list" data-toggle="tab"><i class="fa fa-link"></i> <span>角色列表</span></a>
        </li>

        <li class="header">邮件</li>
        <!-- Optionally, you can add icons to the links -->
        <li>
          <a href="#mail_list" aria-controls="mail_list" data-toggle="tab"><i class="fa fa-link"></i> <span>邮件列表</span></a>
        </li>

        <li class="header">道具</li>
        <!-- Optionally, you can add icons to the links -->
        <li>
          <a href="#item_name2id_list" aria-controls="item_name2id_list" data-toggle="tab">
            <i class="fa fa-link"></i> <span>查询道具编号</span>
          </a>
        </li>
        <li>
          <a href="#item_attr_table" aria-controls="item_attr_table" data-toggle="tab">
            <i class="fa fa-link"></i> <span>查询道具属性</span>
          </a>
        </li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">

    <!-- Main content -->
    <section class="content">

      <div class="tab-content">
        <!-- 帐号列表 -->
        <div role="tabpanel" class="tab-pane fade in active" id="acc_list">
          <table
                  data-toggle="table"
                  data-show-refresh="true"
                  data-show-columns="true"
                  data-minimum-count-columns="2"
                  data-pagination="true"
                  data-id-field="id"
                  data-page-list="[10, 15, 25, 50, 100, ALL]"
                  data-show-footer="false"
                  data-side-pagination="server"
                  data-url="{:U('Admin/Api/account_list')}"
          >
            <thead>
            <tr>
              <th data-field="id">帐号编号</th>
              <th data-field="username">用户名</th>
              <th data-field="email">邮箱</th>
              <th data-field="joindate">加入时间</th>
              <th data-field="last_ip">最后登录IP</th>
              <th data-field="last_login">最后登录时间</th>
              <th data-field="locked">是否锁定</th>
              <th data-field="failed_logins">登录失败次数</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>

        <!-- 角色列表 -->
        <div role="tabpanel" class="tab-pane fade" id="chara_list">
          <table
                  data-toggle="table"
                  data-show-refresh="true"
                  data-show-columns="true"
                  data-minimum-count-columns="2"
                  data-pagination="true"
                  data-id-field="id"
                  data-page-list="[10, 15, 25, 50, 100, ALL]"
                  data-show-footer="false"
                  data-side-pagination="server"
                  data-url="{:U('Admin/Api/chara_list')}"
          >
            <thead>
            <tr>
              <th data-field="guid">角色编号</th>
              <th data-field="name">角色名</th>
              <th data-field="level">等级</th>
              <th data-field="money">金币</th>
              <th data-field="totaltime">总在线时间</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>

        <!-- 邮件列表 -->
        <div role="tabpanel" class="tab-pane fade" id="mail_list">
          <div id="mail-table-toolbar">
            <button class="btn btn-default" data-toggle="modal" data-target="#modal-mail">发送邮件</button>
          </div>
          <table
                  data-toggle="table"
                  data-toolbar="#mail-table-toolbar"
                  data-show-refresh="true"
                  data-show-columns="true"
                  data-minimum-count-columns="2"
                  data-pagination="true"
                  data-id-field="id"
                  data-page-list="[10, 15, 25, 50, 100, ALL]"
                  data-show-footer="false"
                  data-side-pagination="server"
                  data-url="{:U('Admin/Api/mail_list')}"
          >
            <thead>
            <tr>
              <th data-field="id">邮件编号</th>
              <th data-field="receiver">接收玩家</th>
              <th data-field="subject">标题</th>
              <th data-field="body">内容</th>
              <th data-field="money">发送的金币</th>
              <th data-field="state">处理情况</th>
              <th data-field="time">添加时间</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>

        <!-- 查找道具编号 -->
        <div role="tabpanel" class="tab-pane fade" id="item_name2id_list">
          <table
                  data-toggle="table"
                  data-search="true"
                  data-show-refresh="true"
                  data-show-columns="true"
                  data-minimum-count-columns="2"
                  data-id-field="entry"
                  data-show-footer="false"
                  data-url="{:U('Admin/Api/item_name2id')}"
                  data-side-pagination="client"
                  data-pagination="true"
                  data-page-list="[10, 15, 25, 50, 100, ALL]"
          >
            <thead>
            <tr>
              <th data-field="entry">道具编号</th>
              <th data-field="name">道具名</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>

        <!-- 查找道具属性 -->
        <div role="tabpanel" class="tab-pane fade" id="item_attr_table">
          <table
                  class="easyui-propertygrid"
                  style="width:300px"
                  url="{:U('Admin/Api/item_attr_table')}"
                  showGroup="true"
                  scrollbarSize="0"
          ></table>
        </div>
      </div>

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- Default to the left -->
    <strong>Copyright &copy; 2016 <a href="#">671643387</a>.</strong> All rights reserved.
  </footer>

  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- 发送邮件弹出框 -->
<div class="modal fade" id="modal-mail">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">发送邮件</h4>
      </div>
      <form name="mail-form" class="form-horizontal" action="#" method="post">
        <div class="modal-body">
          <div class="form-group">
            <label class="col-sm-3 control-label">角色编号</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="guid" placeholder="请输入接收邮件玩家GUID">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">标题</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="subject" placeholder="请输入标题">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">内容</label>
            <div class="col-sm-9">
              <textarea class="form-control" name="body" placeholder="请重新输入内容" rows="5"></textarea>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">发送的金币数量</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" name="money" placeholder="请输入金币数量">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">发送的道具ID</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" name="item_guid" placeholder="请输入道具ID">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">发送的道具数量</label>
            <div class="col-sm-4">
              <input type="text" class="form-control" name="item_count" placeholder="请输入道具数量">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button  name="send-mail" type="button" class="btn btn-primary">发送邮件</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- 发送邮件弹出框结束 -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="__PUBLIC__/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="__PUBLIC__/AdminLTE/js/app.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="__PUBLIC__/bootstrap/js/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="__PUBLIC__/bootstrap/js/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- Toast -->
<script src="__PUBLIC__/bootstrap/js/toastr.min.js"></script>
<script src="__PUBLIC__/js/index-script.js"></script>
<!-- easyui -->
<script type="text/javascript" src="__PUBLIC__/easyui/jquery.easyui.min.js"></script>

<script>
  $(document).ready(function(){
    $("button[name='send-mail']").on('click', function(){
      var args = {};
      $("form[name='mail-form'] input").map(function(){
        args[$(this).attr("name")] = $(this).val();
      });
      $("form[name='mail-form'] textarea").map(function(){
        args[$(this).attr("name")] = $(this).val();
      });
      ajaxRequest("{:U('Admin/Api/send_mail')}", args, function(err, data){
        if (err) {
          console.log(err);
        } else {
          if (data.code != 0) {
            toastr.error(data.desc);
          } else {
            $("div[id='modal-mail']").modal('hide');
            toastr.success('邮件发送成功！');
          }
        }
      });
    });
  });
</script>

</body>
</html>
